<template>
	<view>
	  <!-- 标题 -->
	  <el-divider content-position="left">
		<span class="h1">首页</span>
	  </el-divider>
	  <!-- 仪表盘 -->
	  <h1>仪表盘</h1>
	  <br>
	  <!-- 卡片容器 -->
	  <el-row :gutter="20">
		<!-- 卡片1 -->
		<el-col :span="8" class="card-col">
		  <el-card class="custom-card color-0">
			<div class="card-content">
			  <post-view-sum></post-view-sum>
			</div>
		  </el-card>
		</el-col>
		<!-- 卡片2 -->
		<el-col :span="8" class="card-col">
		  <el-card class="custom-card color-1">
			<div class="card-content">
			  <user-count></user-count>
			</div>
		  </el-card>
		</el-col>
		<!-- 卡片3 -->
		<el-col :span="8" class="card-col">
			<el-card class="custom-card  color-2">
			  <div class="card-content">
				<chart-line></chart-line>
			  </div>
			</el-card>
		  </el-col>
		
		<!-- 卡片4 -->
		<el-col :span="24" class="card-col">
			<el-card class="custom-card ">
			  <div class="card-content">
				<post-classification-statistics/>
			  </div>
			</el-card>
		  </el-col>
	  </el-row>
	</view>
  </template>
  
  <script lang="ts" setup>

  </script>
  
  <style scoped>
  .h1 {
	font-size: 25px;
  }
  .el-table {
	margin-top: 20px;
  }
  
  .card-col {
	margin-bottom: 20px;
  }
  
  .custom-card {
	width: 100%;
	height: 100%;
	/* color: #fff;  */
	transition: box-shadow 0.3s, background-color 0.3s;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border-radius: 15px; /* 圆角边框 */
	overflow: hidden; /* 确保阴影不会超出边框 */
  }
  
  .color-0 { background-color: #0084ff8d; } /* 蓝色 */
  .color-1 { background-color: #55ff0096; } /* 绿色 */
  .color-2 { background-color: #fe950188; } /* 橙色 */
  
  .custom-card:hover {
	box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
  }
  
  .custom-card:hover.color-0 { background-color: #1e8de6; }
  .custom-card:hover.color-1 { background-color: #4cae4c; }
  .custom-card:hover.color-2 { background-color: #d48a3a; }
  
  .card-content {
	padding: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
  }
  </style>